<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../static/bootstrap.min.css">
		<link rel="stylesheet" href="../static/style.css">
		<title>DANS</title>
	</head>
	<body>
		<nav class="navbar navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<a class="navbar-brand" href="#">DANS</a>
			</div>
		</div>
	</nav>
	<div class="container">
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm-3 col-md-2 sidebar">
					<ul class="nav nav-sidebar">
						<li><a href="/index">网路实况</a></li>
					</ul>
					<ul class="nav nav-sidebar">
						<li><a href="/add-container">添加容器</a></li>
						<li><a href="/add-switch">添加switch</a></li>
					</ul>
					<ul class="nav nav-sidebar">
						<li><a href="/del-container">删除container</a></li>
						<li><a href="/del-switch">删除switch</a></li>
					</ul>
					<ul class="nav nav-sidebar">
						<li class="active"><a href="/rule">规则管理</a></li>
					</ul>
					<ul class="nav nav-sidebar">
						<li><a href="/log">日志详情</a></li>
					</ul>
				</div>
				<div class="col-md-offset-2 col-md-10">
					<h3>添加规则</h3>
					<form action="/add_policy/" class="form-horizontal" method="POST">
						<div class="form-group">
                            <label for="policy" class="col-sm-4 control-label">规则内容</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="policy" name="policy">
							</div>
						</div>
						
						<button type="submit" class="btn btn-default center-block">添加</button>
					</form>
					<hr>
                    <h3>已有规则</h3>
					<table class="table table-striped table-bordered">
						<thead>
							<tr>
								<th>序号</th>
								<th>规则</th>
							</tr>
						</thead>
						<tbody>
							{% for info in infos %}
								<tr>
									<td>{{loop.index}}</td>
									<td>{{info}}</td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script src="../static/jquery.min.js"></script>
	<script src="../static/bootstrap.min.js"></script>
	<script src="../static/jtopo-0.4.8-min.js"></script>
	<script src="../static/topo.js"></script>
</body>
</html>
